<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<%@ include file="/common/tag.jsp"%>

<!DOCTYPE html>
<html>

<head>


<%@ include file="/common/meta.jsp"%>
<title>feiynn | 菜单树配置</title>

<%@ include file="/common/link.jsp"%>

<style type="text/css">
.ztree li span.button.switch.level0 {
	visibility: hidden;
	width: 1px;
}

.ztree li ul.level0 {
	padding: 0;
	background: none;
}
</style>

</head>

<body class="top-navigation">

	<div id="page-wrapper" class="white-bg">
		<%@ include file="/common/navs/top-nav.jsp"%>

		<div class="col-md-12" style="padding-left: 15px">

			<%@ include file="/common/navs/head-nav.jsp"%>

			<div class="row">

				<div class="col-lg-12">
					<form id="myForm" role="form" class="form-horizontal">

						<div class="">
							<ul id="treeDemo" class="ztree"></ul>
						</div>

						<button type="button" id="myFormBtn" class="btn btn-primary">保存</button>
						<button type="button" id="myResetBtn" class="btn btn-primary">重置</button>

					</form>
				</div>
			</div>
		</div>

	</div>

	<div class="modal fade" id="saveOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="saveOrUpdateModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="saveOrUpdateModalLabel">添加新的菜单节点</h4>
				</div>
				<div class="modal-body">
					<form id="saveOrUpdateModalForm" class="form-horizontal">
						<input type="hidden" value="" name="id" id="id">
						<div class="form-group">
							<div class="row">
								<div class="col-md-12">
									<p class="form-control-static">菜单名称</p>
									<input type="text" id="treeName" name="treeName" class="form-control required" placeholder="">
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<p class="form-control-static">菜单url</p>
									<input type="text" id="treeUrl" name="treeUrl" class="form-control required" placeholder="">
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<p class="form-control-static">菜单图标样式</p>
									<input type="text" id="treeStyle" name="treeStyle" class="form-control" placeholder="默认为：fa fa-flask">
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" id="saveOrUpdateModalBtn" class="btn btn-primary" data-loading-text="执行中...">确定</button>
					<button type="button" id="saveOrUpdateModalCloseBtn" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="deleteModalLabel">确定吗?</h4>
				</div>
				<div class="modal-body">
					<form id="deleteModalForm" class="form-horizontal">
						<input type="hidden" value="" name="id" id="id">
						<div class="form-group">
							<div class="row">
								<div class="col-md-12">这将删除所有子节点!</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" id="deleteModalBtn" class="btn btn-primary" data-loading-text="执行中...">确定</button>
					<button type="button" id="deleteModalCloseBtn" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<%@ include file="/common/templates/jsAndDivs.jsp"%>

	<link rel="stylesheet" href="${ztree_home}/css/metroStyle/metroStyle.css" type="text/css">
	<script type="text/javascript" src="${ztree_home}/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="${ztree_home}/js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="${ztree_home}/js/jquery.ztree.exedit-3.5.js"></script>
	<script type="text/javascript" src="${ztree_home}/js/jquery.ztree.exhide-3.5.js"></script>


	<script type="text/javascript">
		var pageName = "菜单树配置";
		var setting = {
			view : {
				addHoverDom : addHoverDom,
				removeHoverDom : removeHoverDom,
				selectedMulti : false
			},
			edit : {
				drag : {
					isMove : true,
					isCopy : false
				},
				enable : true,
				editNameSelectAll : false,
				showRemoveBtn : false,
				showRenameBtn : false
			},
			data : {
				key : {
					title : "title"
				},
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "pId",
					rootPId : 0
				}
			},
			callback : {
				//beforeDrag : beforeDrag,
				beforeDrop : beforeDrop
			//beforeEditName : beforeEditName,
			//beforeRemove : beforeRemove
			//beforeRename : beforeRename,
			}
		};

		var randomNum = 1;
		var currentTreeNode;
		var saveOrUpdateModalFormValidate;
		var currentOperation = "";

		function addHoverDom(treeId, treeNode) {

			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag
					|| $("#addBtn_" + treeNode.tId).length > 0
					|| $("#editBtn_" + treeNode.tId).length > 0
					|| $("#deleteBtn_" + treeNode.tId).length > 0) {
				return;
			}

			var addStr = "";

			var addStr = "";
			if (treeNode.level == 0) {
				addStr = "<span id='addBtn_" + treeNode.tId + "' title='新增节点' ><i class='fa fa-plus-square-o' style='font-size:16px' ></i></span>";
			} else {
				addStr = "<span id='addBtn_" + treeNode.tId + "' title='新增节点' ><i class='fa fa-plus-square-o' style='font-size:16px' ></i></span>"
						+ "<span id='editBtn_" + treeNode.tId + "' title='编辑节点' ><i class='fa fa-pencil-square-o' style='font-size:16px' ></i></span>"
						+ "<span id='deleteBtn_" + treeNode.tId + "' title='删除节点' ><i class='fa fa fa-trash-o' style='font-size:16px' ></i></span>";
			}
			sObj.after(addStr);
			var btn = $("#addBtn_" + treeNode.tId);
			$("#addBtn_" + treeNode.tId).on("click", function() {
				currentTreeNode = treeNode;
				currentOperation = "save";
				$('#saveOrUpdateModal').modal({
					'backdrop' : 'static'
				});
				$('#saveOrUpdateModalLabel').text('添加新的菜单节点');
				return false;
			});
			$("#editBtn_" + treeNode.tId).on("click", function() {
				currentTreeNode = treeNode;
				currentOperation = "update";
				$('#treeName').val(treeNode.name);
				$('#treeUrl').val(treeNode.treeUrl);
				$('#treeStyle').val(treeNode.style);
				$('#saveOrUpdateModal').modal({
					'backdrop' : 'static'
				});
				$('#saveOrUpdateModalLabel').text('编辑菜单节点');
				return false;
			});
			$("#deleteBtn_" + treeNode.tId).on("click", function() {
				currentTreeNode = treeNode;
				currentOperation = "delete";
				$('#deleteModal').modal({
					'backdrop' : 'static'
				});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_" + treeNode.tId).unbind().remove();
			$("#editBtn_" + treeNode.tId).unbind().remove();
			$("#deleteBtn_" + treeNode.tId).unbind().remove();
		};
		function beforeRemove(treeId, treeNode) {
			if (treeNode.pId == 0) {
				//console.log('error');
				//return false;
			}
		};

		function beforeDrag(treeId, treeNodes) {
			for (var i = 0, l = treeNodes.length; i < l; i++) {
				if (treeNodes[i].drag === false) {
					return false;
				}
			}
			return true;
		}
		//todoo
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
			toastr.clear();
			if (!targetNode) {
				toastr.error('目标节点不存在', '操作错误');
				return false;
			}
			if (targetNode.pId == 0 && moveType != "inner") {
				toastr.error('拖拽操作仅限于根节点下', '操作错误');
				return false;
			}
			//console.log(moveType);
			//console.log(targetNode);
			return true;
		}
		function saveTree() {
			toastr.info('请耐心等候', '数据保存中...');
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var treeNodes = treeObj.getNodes();
			var result = "";
			var nodes = treeObj.transformToArray(treeObj.getNodes());
			//console.log(nodes[0].level);
			for (var i = 0, l = nodes.length; i < l; i++) {

				//console.log(nodes[i]);

				result += ("" + nodes[i].id + "#" + nodes[i].pId + "#"
						+ nodes[i].name + "#" + nodes[i].level + "#"
						+ nodes[i].isParent + "#" + nodes[i].treeUrl + "#"
						+ nodes[i].sId + "#" + nodes[i].style + "#" + ",");
			}
			//console.log(result);
			//$('#confirmModalBtn').attr('disabled', 'disabled');
			//$('#confirmModalBtn').button('reset');
			//$('#confirmModalCloseBtn').click();
			//return false;

			$.ajax({
				type : "POST",
				url : '${admin_home}/saveOrUpdateSysMenu',
				data : {
					nodes : result
				},
				dataType : "json",
				success : function(r) {
					$('#confirmModalBtn').button('reset');
					$('#confirmModalCloseBtn').click();
					if (r.ret == 0) {
						toastr.clear();
						toastr.info('菜单树配置成功', '操作成功');
					} else {
						info(r.msg);
					}
				}
			});
		}

		var isValidate;

		$(function() {

			$.ajax({
				type : "POST",
				url : '${admin_home}/listSysMenu',
				data : $("#yourFormId").serialize(),
				cache : false,
				dataType : "json",
				success : function(r) {
					$.fn.zTree.init($("#treeDemo"), setting, r.msg);
				}
			});

			$('#deleteModalBtn').on('click', function() {
				if (currentOperation == "delete") {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.removeNode(currentTreeNode);
				}
				$('#deleteModalCloseBtn').click();
			});
			$('#saveOrUpdateModalBtn')
					.on(
							'click',
							function() {
								saveOrUpdateModalFormValidate = $(
										"form#saveOrUpdateModalForm").validate(
										{
											rules : {
												treeUrl : {
													required : true
												},
												treeName : {
													required : true
												},
											}
										});
								if (!saveOrUpdateModalFormValidate.form()) {
									return;
								}
								var zTree = $.fn.zTree.getZTreeObj("treeDemo");
								if (currentOperation == "save") {
									$
											.ajax({
												type : "get",
												url : '${admin_home}/getTreeId',
												cache : false,
												dataType : "json",
												success : function(r) {
													currentTreeNode = zTree
															.addNodes(
																	currentTreeNode,
																	{
																		id : r.msg,
																		pId : currentTreeNode.id,
																		name : $(
																				'#treeName')
																				.val(),
																		treeUrl : $(
																				'#treeUrl')
																				.val(),
																		title : $(
																				'#treeUrl')
																				.val(),
																		style : $(
																				'#treeStyle')
																				.val() ? $(
																				'#treeStyle')
																				.val()
																				: "fa fa-flask"
																	});
													$(
															'#saveOrUpdateModalCloseBtn')
															.click();
													return;
												}
											});
								} else if (currentOperation == "update") {
									currentTreeNode.name = $('#treeName').val();
									currentTreeNode.treeUrl = $('#treeUrl')
											.val();
									currentTreeNode.style = $('#treeStyle')
											.val();
									zTree.updateNode(currentTreeNode);
								} else {

								}
								$('#saveOrUpdateModalCloseBtn').click();
							});

			isValidate = $("form#myForm").validate({
				rules : {
					oldPsd : {
						required : true
					},
					newPsd : {
						required : true
					},
					newPsdAgain : {
						required : true,
						equalTo : "#newPsd"
					}
				}
			});

			$("#myFormBtn").on('click', function(event) {
				if (confirm('确定保存么?')) {
					saveTree();
				}
			});

			$('#myResetBtn').on('click', function() {
				if (confirm('确定重置么?')) {
					$.ajax({
						type : "POST",
						url : '${admin_home}/listSysMenu',
						data : $("#yourFormId").serialize(),
						cache : false,
						dataType : "json",
						success : function(r) {
							$.fn.zTree.init($("#treeDemo"), setting, r.msg);
							$('#confirmModalBtn').button('reset');
							$('#confirmModalCloseBtn').click();
							if (r.ret == 0) {
								info('重置成功.');
							} else {
								info(r.msg);
							}
						}
					});
				}
			});

			$("#myForm").keypress(function(event) {
				if (event.keyCode == 13) {
					$("#myFormBtn").click();
					return false;
				}
			});
		});
	</script>

</body>

</html>
